<template>
    <div class="main"
         v-load="loading"
         element-loading-text="登录中 . . ."
         element-loading-spinner="fa fa-spinner fa-spin fa-3x fa-fw"
         element-loading-background="rgba(0, 0, 0, 0.7)">
        <div class="yifei">
            <img class="photo" :src="require('../../assets/login/playground.jpg')" title="四川职业技术学院操场" alt="四川职业技术学院操场"/>
            <div class="container">
                <div class="screen">
                    <div class="screen__content">
                        <form class="login" method="get" @submit.prevent>
                            <div class="login__field">
                                <i class="login__icon fa fa-user"></i>
                                <input type="text" class="login__input" v-model.trim="user.username"
                                       placeholder="账 号 / Account" required autofocus
                                       autocomplete="off" minlength="2">
                            </div>
                            <div class="login__field">
                                <i class="login__icon fa fa-lock"></i>
                                <input type="password" v-model.trim="user.password" class="login__input"
                                       placeholder="密码 / Password" required maxlength="16"
                                       minlength="6" autocomplete="off"
                                >
                            </div>
                            <button class="button login__submit">
                                <span class="button__text" @click="login"> 登 录 / LON IN NOW </span>
                                <i class="button__icon fa fa-chevron-right"></i>
                            </button>
                        </form>
                        <div class="social-login">
                            <div class="social-icons">
                                <el-tooltip content="四川职业技术学院官网" placement="bottom" effect="light">
                                    <a href="https://www.scvtc.edu.cn/" class="social-login__icon fa fa-home"
                                       target="_blank"></a>
                                </el-tooltip>
                                <el-tooltip content="四川职业技术学院教务系统" placement="bottom" effect="light">
                                    <a href="https://jwc.scvtc.edu.cn/index.htm"
                                       class="social-login__icon fa fa-graduation-cap" target="_blank"></a>
                                </el-tooltip>
                                <el-tooltip content="四川职业技术学院OA系统" placement="bottom" effect="light">
                                    <a href="https://oa.scvtc.edu.cn/seeyon/index.jsp"
                                       class="social-login__icon fa fa-desktop" target="_blank"></a>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                    <div class="screen__background">
                        <span class="screen__background__shape screen__background__shape4"></span>
                        <span class="screen__background__shape screen__background__shape3"></span>
                        <span class="screen__background__shape screen__background__shape2"></span>
                        <span class="screen__background__shape screen__background__shape1"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {login} from "../../api";
    import {mapMutations} from 'vuex';

    export default {
        name: 'Login',

        data() {
            return {
                loading: false,
                user: {
                    username: "admin",
                    password: "123456"
                }
            };
        },

        methods: {
            ...mapMutations("user", ["USER_LOGIN"]),
            async login() {
                if (this.checkUser()) {
                    // 先进行校验 再登录
                    this.loading = true;
                    await login(this.user).then(response => {

                        if (response.token) {
                            // 登录成功 存储数据到 Vuex
                            this.USER_LOGIN(response.token);
                            this.$router.replace("/").catch(() => {
                            });
                        }
                    }).finally(() => {
                        this.loading = false;
                    })
                }
            },
            checkUser() {
                if (this.user.username.length < 2) {
                    return false;
                }
                if (this.user.password.length < 6 || this.user.password.length > 16) {
                    return false;
                }
                return true;
            }
        },

        mounted() {
        },

        computed: {},

        watch: {}
    }
</script>

<style scoped>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: Raleway, sans-serif;
    }

    .main {
        background: linear-gradient(200deg, #FFFFFF, #D4D3E8);
    }

    .yifei {
        margin: 0 auto;
        position: relative;
        display: flex;
        height: 56px;
        width: 800px;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }

    .photo {
        height: 560px;
        width: 430px;
        border-radius: 10px 0 0 10px;
        box-shadow: 0 0 24px rgb(89, 90, 92);
    }

    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }

    .screen {
        background: linear-gradient(90deg, rgb(107, 142, 197), rgb(115, 177, 216));
        position: relative;
        height: 560px;
        width: 370px;
        border-radius: 0 10px 10px 0;

    }

    .screen__content {
        z-index: 1;
        position: relative;
        height: 100%;
        box-shadow: 0 0 24px rgb(89, 90, 92);
        border-radius: 0 10px 10px 0;

    }

    .screen__background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        overflow: hidden;
        border-radius: 0 10px 10px 0;
    }

    .screen__background__shape {
        transform: rotate(45deg);
        position: absolute;
    }

    .screen__background__shape1 {
        height: 520px;
        width: 520px;
        background: #FFF;
        top: -50px;
        right: 120px;
        border-radius: 0 72px 0 0;
    }

    .screen__background__shape2 {
        height: 220px;
        width: 220px;
        background: rgb(115, 162, 206);
        top: -172px;
        right: 0;
        border-radius: 32px;
    }

    .screen__background__shape3 {
        height: 540px;
        width: 190px;
        background: linear-gradient(270deg, rgb(104, 133, 191), rgb(115, 179, 219));
        top: -24px;
        right: 0;
        border-radius: 32px;
    }

    .screen__background__shape4 {
        height: 400px;
        width: 200px;
        background: rgb(115, 177, 216);
        /*background: rgb(191,203,214);*/
        top: 420px;
        right: 50px;
        border-radius: 60px;
    }

    .login {
        width: 320px;
        padding: 156px 30px 30px;
    }

    .login__field {
        padding: 20px 0px;
        position: relative;
    }

    .login__icon {
        position: absolute;
        top: 30px;
        color: #7875B5;
    }

    .login__input {
        border: none;
        border-bottom: 2px solid #D1D1D4;
        background: none;
        padding: 10px;
        padding-left: 24px;
        font-weight: 700;
        width: 75%;
        transition: .2s;
    }

    .login__input:active,
    .login__input:focus,
    .login__input:hover {
        outline: none;
        border-bottom-color: #6A679E;
    }

    .login__submit {
        background: #fff;
        font-size: 14px;
        margin-top: 50px;
        padding: 8px 30px;
        border-radius: 26px;
        border: 1px solid #D4D3E8;
        text-transform: uppercase;
        font-weight: 700;
        display: flex;
        align-items: center;
        width: 95%;
        color: rgb(101, 101, 101);
        box-shadow: 0px 2px 2px rgb(101 101 101);
        cursor: pointer;
        transition: .2s;
    }

    .login__submit:active,
    .login__submit:focus,
    .login__submit:hover {
        border-color: rgb(166, 166, 168);
        outline: none;
    }

    .button__icon {
        font-size: 20px;
        margin-left: auto;
        color: rgb(166, 166, 168);
    }

    .social-login {
        position: absolute;
        height: 140px;
        width: 160px;
        text-align: center;
        bottom: 0px;
        right: 0px;
        overflow: hidden;
        color: #fff;

    }

    .social-icons {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .social-login__icon {
        padding: 20px 10px;
        color: #fff;
        text-decoration: none;
        text-shadow: 0px 0px 8px #7875B5;
    }

    .social-login__icon:hover {
        transform: scale(1.5);
    }
</style>